.entete{width: 100%;
  height: 580PX;
  filter: brightness(60%);}

.logo{position: absolute;
  width: 30%;
height: 40%;
margin-top:   -40%;
margin-left: 35%;
z-index: 1;
}
.textelogo {position:absolute;
  color:white;
margin-top: -300PX;
margin-left: 25%;
width: 50%;
text-align: center;
z-index: 1;
font-size: 18PX;}

button{background-color: #33ceff;
  margin-top: -180PX;
  margin-left: 43%;
  position: absolute;
  color: white;
  width: 15%;
  height: 40PX;
  border-style: none;}



.numero{color: black;
font-size: 16px;}
.num{position: absolute;
margin-left: 2%;
margin-top: -566PX;
width: 20%;
z-index: 2;
}
.adresse{color: black;
font-size: 16px;}
.adr{position: absolute;
color:wheat;
font-size: 5PX;
margin-left: 80%;
margin-top: -566PX;
width: 20%;
z-index: 2;}

.page{position: absolute;
  width: 50%;
  text-align: start;
  margin-left: 25%;
margin-top: -60px;
color:white;
background: rgb(45,222,253);
background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
font-size: 30PX;
font-weight: 700;
border-radius: 20PX;
}

h2{font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 14PX;
margin-left:28%;}

.accroche{margin-top: 20PX;
  text-align:start;
font-size: 16PX;
color:white;
font-weight: -600;
margin-left: 2%;}


.navbar{ 
margin-top: -580PX;
position: fixed;
margin-left: 0%; 
height: 50px;
width: 100%;
z-index: 1;}
.navbar-nav .nav-link.active{ color:#33ceff;}

.collapse{justify-content: center;}
.navbar-nav > li > a{font-size: 20PX;
  font-weight: 400;
margin-left: 20PX;
color: white;
}


.conteneur1{display: flex;
justify-content: space-around;} 
p{color:orange;
font-weight: bold;
font-size: 22PX;
text-align: center;}
.rang1{width: 20%;
height: 200PX;
margin-top: 140PX;
border-bottom: solid 3PX;} 


.conteneur2{display: flex;
justify-content: space-around;} 
p{color:orange;
font-weight: bold;
font-size: 22PX;
text-align: center;}
.rang2{width: 20%;
height: 200PX;
margin-top: 20PX;
border-bottom: solid 3PX;} 

.amortisseur{width: 30%;
margin-left: 40%;}
.phare{width: 30%;
  margin-left: 40%;}
  .carrosserie{width: 30%;
    margin-left: 30%;}
    .boitevitesse{width: 30%;
      margin-left: 40%;}
      .batterie{width: 30%;
        margin-left: 40%;}
    .amortisseur{width: 30%;
      margin-left: 40%;}
      .radiateur{width: 30%;
        margin-left: 40%;}
        .moteur{width: 30%;
          margin-left: 35%;}

      

footer{width: 100%;
  height: 345PX;
  background: rgb(242,164,9);
  background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
  margin-top: 0px;
  position: absolute;
  margin-top: 240px;}
  
  .logofooter{width: 15%;
  margin-left: 43%;}
  
   
  .textefooter{text-align: center;
    color: black;
  font-weight: 400;
  font-size: 16PX;}
  .facebook{margin-top: 40PX;
    margin-left: -60PX;}
  
  
  .buttonfooter{margin-top:100px;
    background-color: #33ceff;
    position: absolute;
    color: white;
    width: 15%;
    height: 40PX;
    border-style: none;
    margin-left: 44%;}
  

    .mention{position: absolute;
      color: white;
    margin-left: 35%;
  margin-top: 10PX;}
  
    .politique{position: absolute;
      color: white;
      margin-left: 47%;
      margin-top: -15PX;
    } 

  @media screen and (min-width: 300px) and (max-width: 650px){

    header{margin-top: -180px; }
    .entete{height: 400PX;}
    img.entete{ height:400PX;}
    .logo{margin-top: -48%;
      margin-left: 30%;
      width: 35%;
      height: 70px;}
      .textelogo{font-size: 10PX;
      margin-top: -28%;
      font-weight: bold;
      width: 50%;
      margin-left: 22%;}  
  
  .navbar{margin-top: -210px;
    margin-left: -48%;
    position: fixed;
  z-index: 1; }
  .navbar-collapse{display: flex;
  margin-left: 50%;
  margin-top: 55%;
  background-color: orange;}
  .navbar-toggler{color: orange;
  height: 42px;
  width: 52PX;
  margin-left: 45%;
margin-top: 0%;}
  .navbar-toggler-icon{background-color: aliceblue;}
    
  .buttonheader{margin-top: -14%;
      width: 30%;
    height: 25PX;
    margin-left: 33%;
    font-size: 10PX;}
    
    h2{font-size: 24PX;
    margin-left: 60px;}
    .page{width: 90%;
    height: 30%;
    margin-left: 6%;
    margin-top: -18px;}
    .accroche{font-size: 13px;}
    .titre{color:orange;
      font-weight: 700;
    font-size: 20px;
}
    .conteneur1{flex-direction: column;
      text-align: center;
    margin-top: 120px;} 
        .p{color:black;
        font-weight: bold;
        font-size: 20PX;
        text-align: center;} 
        .rang1{width: 60%;
          height: 140PX;
          margin-top: 100PX;
        margin-left: 20%;
        border-bottom: solid 3px gray;     }
          .texte{color:black; 
          font-size: 16px;
          font-weight: 600;}
    
          .conteneur2{flex-direction: column;
            text-align: center;} 
              .p{color:black;
              font-weight: bold;
              font-size: 20PX;
              text-align: center;} 
              .rang2{width: 60%;
                height: 180PX;
                margin-top: 50PX;
              margin-left: 20%;
              border-bottom: solid 3px gray;}
                .texte{color:black; 
                font-size: 16px;
                font-weight: 600;}

                .moteur{width: 26%;
                  margin-left: 8%;
                margin-top: 7%;}
                  .phare{width: 30%;
                    margin-left: 10%;
                  margin-top: 7%;}
                    .carrosserie{width: 30%;
                      margin-left: 10%;
                    margin-top: 7%;}
                      .boitevitesse{width: 30%;
                        margin-left: 10%;}
                        .batterie{width: 30%;
                          margin-left: 10%;
                        margin-top: 7%;}
                          .radiateur{width: 30%;
                            margin-left: 10%;
                          margin-top:7%;}
                          
                      .amortisseur{width: 30%;
                        margin-left: 10%;}
                
                        .buttonfooter{margin-top:60px;
                          background-color: #33ceff;
                          position: absolute;
                          color: white;
                          width: 40%;
                          height: 40PX;
                          border-style: none;
                          margin-left: 30%;}


                        footer{width: 100%;
                          height: 260PX;
                          background: rgb(242,164,9);
                          background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
                          position: absolute;
                          margin-top: 160px;}
                          
                          .logofooter{width: 25%;
                          margin-left: 38%;} 
                          
                          .textefooter{font-size: 13PX;}
                          .mention{margin-left: 25%;
                            font-size: 10PX;} 
                          .politique{font-size: 10px;
                          margin-left: 55%;}  
                        }
                                   

  @media(min-width:1000px){
    .navbar{background: rgb(242,164,9);
    background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%); }
                                            }                                      
                                            @media screen and (min-width: 651px) and (max-width: 1023px){ 
                                              .entete{width: 100%;
                                                height: 400PX;
                                                filter: brightness(60%);
                                                }
                                              
                                                .logo{position:absolute;
                                                  width: 22%;
                                                height: 14%;
                                                margin-top: -50%;
                                                margin-left: 40%;
                                                z-index: 1;
                                                }
                                              
                                                .textelogo {position:absolute;
                                                  color:white;
                                                margin-top: -250PX;
                                                margin-left: 25%;
                                                width: 50%;
                                                text-align: center;
                                                z-index: 1;
                                                font-size: 14PX;
                                              font-weight: 700;}
                                              
                                              
                                              .buttonheader{background-color: #33ceff;
                                              margin-top: -180PX;
                                              margin-left: 43%;
                                              position: absolute;
                                              color: white;
                                              width: 18%;
                                              height: 30PX;
                                              border-style: none;
                                            font-size: 14PX;}
                                              
                                              .paiement{position: absolute;
                                                width: 16%;
                                              margin-top: -295px;
                                              margin-left: 75%;
                                              z-index: 1;
                                              rotate: 12deg;}
                                    
                                              .navbar{margin-top: -290px;
                                                margin-left: -48%;
                                                position: fixed;
                                            z-index: 1; }
                                              .navbar-collapse{display: flex;
                                              margin-left: 40%;
                                            margin-top: 0%;
                                            background-color: orange;}
                                              .navbar-toggler{color: orange;
                                              height: 42px;
                                            width: 52PX;
                                            
                                            margin-left: 50%;}
                                            .navbar-toggler-icon{background-color: aliceblue;}  
.page{position: absolute;
width: 70%;
text-align: start;
margin-left: 16%;
margin-top: -80px;
color:white;
background: rgb(45,222,253);
background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
border-radius: 20px;
font-size: 30PX;
font-weight: 700;}

.conteneur1{display: flex;
  flex-flow: wrap;
margin-top: 120PX;} 
  p{color:orange;
  font-weight: bold;
  font-size: 22PX;
  text-align: center;
}
  .rang1{width: 45%;
  height: 250PX;
margin-top: 50PX;
border-bottom: solid 3px gray;


} 

  .conteneur2{display: flex;
    flex-flow: wrap;} 
    p{color:orange;
    font-weight: bold;
    font-size: 22PX;
    text-align: center;}
    .rang2{width: 45%;
    height: 240PX;
    margin-top: 140PX;
margin-top: 50PX;
border-bottom: solid 3px gray;} 

.moteur{width: 27%;
  margin-left: 38%;
margin-top: 7%;}
  .phare{width: 30%;
    margin-left: 40%;
  margin-top: 7%;}
    .carrosserie{width: 30%;
      margin-left: 30%;
    margin-top: 7%;}
      .boitevitesse{width: 30%;
        margin-left: 40%;}
        .batterie{width: 30%;
          margin-left: 40%;
        margin-top: 7%;}
          .radiateur{width: 30%;
            margin-left: 40%;
          margin-top:7%;}
          
      .amortisseur{width: 30%;
        margin-left: 40%;}


        .buttonfooter{margin-top:60px;
          background-color: #33ceff;
          position: absolute;
          color: white;
          width: 20%;
          height: 40PX;
          border-style: none;
          margin-left: 40%;}

          .mention{position: absolute;
            color: white;
          margin-left: 25%;
        margin-top: 10PX;}

}
    
@media screen and (min-width: 1300PX){
  .entete{
    width: 100%;
    height: 750PX;
    filter: brightness(60%);
    }
  
     .logo{position:absolute;
      width: 30%;
    height: 40%;
    margin-top: -34%;
    margin-left: 36%;
    z-index: 1;
    }
  
    .textelogo {position:absolute;
      color:white;
    margin-top: -280PX;
    margin-left: 26%;
    width: 50%;
    text-align: center;
    z-index: 1;
    font-size: 18PX;
  font-weight: 700;}

  


.buttonheader{background-color: #33ceff;
  
margin-top: -160PX;
margin-left: 44%;
position: absolute;
color: white;
width: 13%;
height: 40PX;
border-style: none;
z-index: 1;}

.paiement{position: absolute;
  width: 14%;
margin-top: -395px;
margin-left: 73%;
z-index: 1;
rotate: 12deg;}

.numero{color: black;
  font-size: 16px;}
  .num{position: absolute;
  margin-left: 3%;
  margin-top: -736PX;
  width: 20%;
  z-index: 2;
  }
  .adresse{color: black;
  font-size: 16px;}
  .adr{position: absolute;
  color:wheat;
  font-size: 5PX;
  margin-left: 80%;
  margin-top: -736PX;
  width: 20%;
  z-index: 2;
  }

.navbar{ 
  margin-top: -750PX;
  position: fixed;
  margin-left: 0%;
  height: 50px;
  width: 100%;
  z-index: 1;
  }

  .navbar-nav .nav-link.active{ color:#33ceff}

.collapse{justify-content: center;
color:#33ceff;}
.navbar-nav > li > a{font-size: 20PX;
  font-weight: 600;
margin-left: 20PX;
color: white;
}
.page{position: absolute;
  width: 50%;
  text-align: start;
  margin-left: 25%;
margin-top: -80px;
color:white;
background: rgb(45,222,253);
background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
border-radius: 20px;
font-size: 30PX;
font-weight: 700;}

h2{font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 18PX;
margin-left: 37%;}

.accroche{margin-top: 24PX;
  text-align:center;
font-size: 20PX;
color:white;
font-weight: -600;
margin-left: 2%;}


footer{width: 100%;
  height: 398PX;
  background: rgb(242,164,9);
  background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
  position: absolute;
  margin-top: 277px;}}  
                                      
                                      
                                         
   @media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
 


 .logo{margin-top: -42%;}

  .conteneur1{margin-top: 10%;} }